﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}

<!DOCTYPE html>


<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>赋码管理</title>
    <link href="~/lib/layui/css/layui.css" rel="stylesheet" />
    @* <script src="~/lib/layui/layui.js"></script> *@
    <script src="~/js/js.cookie.js"></script>
    <script src="~/js/moment.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
</head>
<body>
    <form class="layui-form" action="">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div style="left:20px;width:197px">
                        <select id="QUCodeType" lay-filter="testSelect">
                            <option value="-1">物料条码</option>
                            <option value="0">物料条码</option>
                            <option value="1">库存条码</option>
                            <option value="2">仓库条码</option>
                        </select>
                    </div>
                    <div style="left:40px;width:197px">
                        <select id="QUCodeStart" lay-filter="testSelect">
                            <option value="-1">请选择状态</option>
                            <option value="0">生效</option>
                            <option value="1">失效</option>
                        </select>
                    </div>

                    <div style="left:100px">
                        <button onclick="QUCodeSearch(1,2)" id="searchBtn" type="button" class="layui-btn layui-btn-normal">搜索</button>
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" lay-on="test-page-custom">
                            <i class="layui-icon layui-icon-add-1">新增</i>
                        </button>

                    </div>
                </div>
            </div>
        </div>
    </form>

    <table style="left:320px" class="layui-hide" id="ID-table-demo-datas" lay-filter="ID-table-demo-datas"></table>

    <script type="text/html" id="toolDemos">
        <div class="layui-clear-space">
            <a class="btn btn-link layui-btn-xs" lay-on="test-page-customseer" lay-event="Show"  style="color:cornflowerblue">详情 </a>
            <a class="btn btn-link layui-btn-xs" lay-on="test-page-customseer" lay-event="Update"  style="color:cornflowerblue">编辑 </a>
        </div>
    </script>
    <div id="demo-laypage-alles"></div>

    <script type="text/html" id="toolDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="YesWang">选择</a>
        </div>
    </script>
    <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>



    <script>
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;
        layui.use(function () {
            // 事件
            util.on('lay-on', {
                'test-page-custom': function () {
                    layer.open({
                        type: 1,
                        area: '100%',
                        resize: false,
                        shadeClose: true,
                        title: '添加赋码管理',
                        content: `
                                <form class="layui-form" action="">
                                    <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                                    <div class="demo-Add-container">
                                        <div class="layui-form-item">
                                            <div class="layui-input-group">
                                                <div class="layui-input-prefix" style="left:28px">
                                                    条码格式
                                                </div>
                                                <div style="left:30px;width:197px">
                                                    <select id="QUCodeFormat" lay-filter="testSelect">
                                                        <option value="0">QR二维码</option>
                                                        <option value="1">UPC码</option>
                                                    </select>
                                                </div>
                                                <div class="layui-input-prefix" style="left:70px">
                                                    条码类型
                                                </div>
                                                <div style="left:70px;width:197px">
                                                    <select id="QUCodeType" lay-filter="testSelect">
                                                        <option value="-1">物料条码</option>
                                                        <option value="0">物料条码</option>
                                                        <option value="1">库存条码</option>
                                                        <option value="2">仓库条码</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <div class="layui-input-group">
                                                <div class="layui-input-prefix" style="left:28px">
                                                    物料名称
                                                </div>
                                                <div style="width:220px;left:28px">
                                                    <input style="width:220px" type="text" id="ProductManageName" value="" lay-verify="required" placeholder="请输入物料" lay-reqtext="请填写物料" autocomplete="off" class="layui-input" lay-affix="clear">
                                                </div>
                                                <div style="left:28px">
                                                    <button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-customsp">
                                                        <i class="layui-icon layui-icon-search"></i>
                                                    </button>
                                                </div>
                                                <div class="layui-input-prefix" style="left:40px">
                                                    物料编码
                                                </div>
                                                <div style="width:220px;left:40px">
                                                    <input style="width:220px" type="text" id="ProductManageNode" value="" lay-verify="required" placeholder="请输入物料编码" lay-reqtext="请填写物料编码" autocomplete="off" class="layui-input" lay-affix="clear">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <div class="layui-input-group">
                                                <div class="layui-input-prefix" style="left:55px">
                                                    状态
                                                </div>
                                                <div style="width:220px;left:55px">
                                                    <div class="layui-form-item">
                                                        <input type="radio" name="QUCodeStart" value="0" title="生效" lay-filter="demo-radio-filter" checked>
                                                        <input type="radio" name="QUCodeStart" value="1" lay-filter="demo-radio-filter" title="失效">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <div class="layui-input-group">
                                                <div class="layui-input-prefix" style="left:26px">
                                                    条码内容
                                                </div>
                                                <div style="width:220px;left:27px">
                                                    <input style="width:220px" type="text" id="QUCodeMatter" value="" lay-verify="required" placeholder="请输入内容" lay-reqtext="请填写内容" autocomplete="off" class="layui-input" lay-affix="clear">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-input-group">
                                                <div class="layui-input-prefix" style="left:55px">
                                                    备注
                                                </div>
                                                <div style="width:780px;left:55px">
                                                    <textarea style="width:780px" type="textarea" id="QUCodeRemark" value="" lay-verify="required" placeholder="请输入内容" lay-reqtext="请填写备注" autocomplete="off" class="layui-input layui-textarea" lay-affix="clear"></textarea>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <div class="layui-input-group">
                                                <div class="layui-input-prefix" style="left:55px">
                                                    条码
                                                </div>
                                                <div style="width:780px;left:55px">
                                                    <button type="button" class="layui-btn" onclick="GenerateBarCode()">生成条码</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-input-group">
                                                <div style="width:780px;left:55px">
                                                    <img id="BarCode" src="" style="width:200px;height:200px;">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-form-item" style="left:755px">
                                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="demo-Add">确定</button>
                                        </div>
                                    </div>
                                    </div>
                                </form>
                                `,
                        success: function () {

                            // 对弹层中的表单进行初始化渲染
                            form.render();
                            // 表单提交事件
                            form.on('submit(demo-Add)', function (data) {
                                var field = data.field; // 获取表单字段值

                                //获取name数据
                                let first = {
                                    quCodeFormat: $("#QUCodeFormat").val(),
                                    quCodeType: $("#QUCodeType").val(),
                                    productManageName: $("#ProductManageName").val(),
                                    productManageNode: $("#ProductManageNode").val(),
                                    quCodeStart: $("[name=QUCodeStart]").val(),
                                    quCodeMatter: $("#QUCodeMatter").val(),
                                    quCodeRemark: $("#QUCodeRemark").val(),
                                    barCode: $("#BarCode").prop('src'),
                                };
                                console.log("##!!!");
                                // 显示填写结果，仅作演示用
                                // layer.alert(JSON.stringify(field), {
                                //     title: '当前填写的字段值'
                                // });
                                // 此处可执行 Ajax 等操作
                                // …
                                $.ajax({
                                    url: '@ViewBag.FoundationWrite' + "/api/UserLi/Createqucode",
                                    data: JSON.stringify(first),
                                    type: "post",
                                    async: true,
                                    dataType: "json",
                                    contentType: "application/json",
                                    success: res => {
                                        if (res.code > 0) {
                                            alert('新增成功');
                                            layer.closeAll(); // 关闭当前弹层
                                        }
                                        else {
                                            alert('新增失败');
                                        }
                                    }
                                })
                                return false; // 阻止默认 form 跳转
                            });

                        }
                    });
                }
            })
        });
        function GenerateBarCode() {
            console.log("图片");
            $("#BarCode").prop('src', "http://localhost:5292/Router/202501021143.jpg");
            form.render();
        }
    </script>

    <script>
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;
        layui.use(function () {
            // 事件
            util.on('lay-on', {
                'test-page-customsp': function () {
                    layer.open({
                        type: 1,
                        area: '100%',
                        resize: false,
                        shadeClose: true,
                        title: '物料选择',
                        content: `
                                <!-- 查询条件 -->
                                <form class="layui-form" action="">

                                    <div class="layui-form">
                                        <div class="layui-row layui-col-space16">

                                            <div class="layui-col-md4">
                                                <div class="layui-input-wrap">

                                                    <div class="layui-input-group">
                                                        <div class="layui-input-split layui-input-prefix">
                                                            物料编码
                                                        </div>
                                                        <input type="text" id="productManageNodes" autocomplete="off" placeholder="请输入物料编码" lay-affix="clear" class="layui-input">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md4">
                                                <div class="layui-input-wrap">

                                                    <div class="layui-input-group">
                                                        <div class="layui-input-split layui-input-prefix">
                                                            物料名称
                                                        </div>
                                                        <input type="text" id="productManageNames" autocomplete="off" placeholder="请输入物料名称" lay-affix="clear" class="layui-input">
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 按钮 -->


                                            <div class="layui-btn-container">
                                                <button class="layui-btn" id="searchBtn" lay-submit lay-filter="demo2">搜索</button>
                                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>

                                <div style="float:right;margin-right:20px;">
                                    <!-- 表格 -->
                                    <table class="layui-table">
                                        <colgroup>
                                            <col width="130">
                                            <col width="130">
                                            <col width="130">
                                            <col width="130">
                                            <col width="130">
                                            <col width="130">
                                            <col width="130">
                                            <col width="130">
                                            <col width="130">
                                            <col>
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>物料编码</th>
                                                <th>物料名称</th>
                                                <th>规格型号</th>
                                                <th>单位</th>
                                                <th>物料/产品</th>
                                                <th>所属分类</th>
                                                <th>是否启用</th>
                                                <th>设置安全库存</th>
                                                <th>创建时间</th>
                                                <td>操作</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                    <div id="demo-laypage-all"></div>
                                </div>
                                `,
                        success: function () {
                            var laypage = layui.laypage;
                            var pageIndex = 1;
                            var pageSize = 1;
                            var productManageNode = "";
                            var productManageName = "";
                            var $ = layui.$;
                            var layer = layui.layer;
                            var util = layui.util;
                            var tree = layui.tree;

                            $(function () {
                                Show(pageIndex, pageSize); //显示
                            })
                            Show(pageIndex, pageSize);

                            //显示
                            function Show(index, size) {
                                $.post({
                                    url: '@ViewBag.FoundationWrite' + '/api/ProductType/ProductManagesLists',
                                    data: JSON.stringify
                                        ({

                                            pageIndex: index,
                                            pageSize: size,
                                            productManageNodes: $("#productManageNodes").val(),
                                            productManageNames: $("#productManageNames").val(),
                                        }),
                                    async: false,
                                    dataType: "json",
                                    contentType: "application/json",
                                    success: res => {
                                        var count = "";

                                        $.each(res.data, function () {

                                            count += `<tr>
                                                        <td>${this.productManageNode}</td>
                                                        <td>${this.productManageName}</td>
                                                        <td>${this.productManageNumber}</td>
                                                        <td>${this.unites}</td>
                                                        <td>${this.productZoo}</td>
                                                        <td>${this.productTypeId}</td>
                                                        <td>${this.isNo}</td>
                                                        <td>${this.inventory}</td>
                                                        <td>${this.productManageTime.replace("T", " ").substring(0, 19)}
                                                        <td><a onclick="GetClient('${this.productManageName}','${this.productManageNode}')" class="btn btn-link">选择</a></td>
                                                        </td>
                                                    </tr>
                                                    `
                                        })
                                        //pagedCount = res.pagedCount;
                                        //pcount = res.totalCount;
                                        $("tbody").html(count)
                                        // console.log(res.data)

                                        //var page = Math.ceil(res.totalCount / 5);  //总页数
                                        console.log(996, pageSize, pageIndex, res);
                                        // 完整显示
                                        laypage.render({
                                            elem: 'demo-laypage-all', // 元素 id
                                            count: res.totalCount, // 数据总数
                                            curr: index,//当前页
                                            limit: size,//每页几条
                                            limits: [1, 2, 3],
                                            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                                            jump: function (obj, first) {
                                                if (!first) {
                                                    Show(obj.curr, obj.limit);
                                                }
                                            }
                                        });

                                    }
                                })
                            }
                        }
                    });
                }
            })
        });

        function GetClient(productManageName, productManageNode) {
            $('#ProductManageName').val(productManageName);
            $('#ProductManageNode').val(productManageNode);
            layer.close(layer.index); // 关闭弹层
            form.render(); // 重新渲染
        }
    </script>
    <script type="text/html" id="toolDemodlx">
        <div class="layui-clear-space">
            <img src="http://localhost:5292/Router/202501021143.jpg" alt="已启用" style="width:30px;height:30px;"> 
        </div>
    </script>
</body>
</html>

<script>
    //文档就绪函数
    $(function () {
        QUCodeSearch(1, 2);
    })
    var table = layui.table;
    var $ = layui.$;
    var form = layui.form;
    var laydate = layui.laydate;
    var util = layui.util;
    var layer = layui.layer;
    var laypage = layui.laypage;

    //赋码管理列表
    function QUCodeSearch(pageIndex, pageSize) {
        let obj = {
            quCodeType: $('#QUCodeType').val() || -1,
            quCodeStart: $('#QUCodeStart').val() || -1,
            pageIndex: pageIndex,
            pageSize: pageSize
        }
        var inst = table.render({
            elem: '#ID-table-demo-datas',
            method: 'post',
            contentType: 'application/json',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', { // 右上角工具图标
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips',
                onClick: function (obj) { // 2.9.12+
                    layer.alert('自定义工具栏图标按钮');
                }
            }],
            url: '@ViewBag.FoundationRead' + '/api/UserLi/SearchQUCode',
            where: obj,
            cols: [[
                { field: 'quCodeId', title: '序号', width: 120 },
                { field: 'barCode', title: '条码', width: 140, minWidth: 140, templet: '#toolDemodlx' },
                { field: 'quCodeFormat', title: '条码格式', width: 120 },
                { field: 'quCodeType', title: '条码类型', width: 120 },
                { field: 'quCodeMatter', title: '条码内容', width: 120 },
                { field: 'quCodeStart', title: '状态', width: 120 },
                { field: 'quCodeRemark', title: '备注', width: 80 },
                { fixed: 'right', title: '操作', width: 140, minWidth: 140, templet: '#toolDemos' }
            ]],
            page: false,
            height: 310,
            done: function (res) {
                var id = this.id;
                console.log(res);// 你可以在这里检查返回的数据结构是否符合预期
                // 触发单元格工具事件
                //分页数据
                laypage.render({
                    elem: 'demo-laypage-alles', // 元素 id
                    count: res.totalCount, // 数据总数
                    curr: pageIndex,
                    limit: pageSize,
                    limits: [2, 3, 4],
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                    jump: function (obj, first) {
                        if (!first) {
                            QUCodeSearch(obj.curr, obj.limit);
                        }
                    }
                });
            }
        })
    }
    table.on('tool(ID-table-demo-datas)', function (obj) { // 双击 toolDouble
        var data = obj.data; // 获得当前行数据
        //详情
        if(obj.event === 'Show'){
            localStorage['quCodeId'] = data.quCodeId;
            layer.open({
                type: 2,
                title: '赋码管理详情',
                shadeClose: true,
                maxmin: true, //开启最大化最小化按钮
                area: ['1200px', '600px'],
                content: '/QUCode/QUCodeShow',
            });
        }
        //编辑
        else if (obj.event === 'Update') {
            localStorage['quCodeId'] = data.quCodeId;
            layer.open({
                type: 2,
                title: '赋码管理修改',
                shadeClose: true,
                maxmin: true, //开启最大化最小化按钮
                area: ['1200px', '600px'],
                content: '/QUCode/QUCodeUpdate',
            });
        }
    });
</script>